<template>
	<div class="lietou-list content">
		<div class="lietou-right">
			<el-form ref="form" :inline="true" label-width="90px" size="small">
				<el-form-item label="反馈用户" label-width="80px">
					<el-select placeholder="反馈用户" v-model="first" style="width: 130px;">
					    <el-option v-for="item in firstLevel" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="反馈状态" label-width="80px">
					<el-select placeholder="反馈状态" v-model="second" style="width: 130px;">
					    <el-option v-for="item in secondLevel" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin:-2px 0 0 10px;">
					<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
			 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
			 :highlight-current-row="true">
				<el-table-column fixed type="index" label="序列" width="50" column-key="id" align="center"></el-table-column>
				<el-table-column prop="usertel" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="aid" label="代理身份" align="center" width="100"></el-table-column>
				<el-table-column prop="cid" label="身份" align="center" width="100"></el-table-column>
			   <el-table-column label="反馈图片" align="center">
					<template slot-scope="scope">
						<el-image style="width: 80px;" :src="scope.row.pics" fit="scale-down" :preview-src-list="scope.row.repicList" :z-index="10000"></el-image>
					</template>
			   </el-table-column>
				<el-table-column prop="content" label="反馈内容" align="center"></el-table-column>
				<el-table-column prop="jinfo.cj_name" label="关联岗位" align="center"></el-table-column>
				<el-table-column prop="cinfo.cname" label="关联公司" align="center"></el-table-column>
				<el-table-column prop="create_time" label="反馈日期" align="center"></el-table-column>
				<el-table-column align="center" label="操作" width="110">
					<template slot-scope="scope">
						<el-button size="small" class="buttonStyle" style="font-size:13px;padding:5px 10px;" @click="handleClose(scope.row.id)" v-if="scope.row.is_handled==1">确认处理</el-button>
						<span v-else>已处理</span>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
				<el-col :span="24" style="text-align:center;margin-top:50px">
					<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
					 @current-change="pageChange">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: 'InnerFankui',
		data() {
			return {
				first: '0',
			   firstLevel:[{label:'全部', value:'0'},{label:'猎头反馈', value:'1'},{label:'用工公司反馈', value:'2'}],//1 猎头 2 用工公司 0 所有
			   second: '0',
			   secondLevel:[{label:'全部', value:'0'},{label:'未处理', value:'1'},{label:'已处理', value:'2'}], //是否处理 1 未处理 2 已处理 0 所有
				nickname:'',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10
			}
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		watch:{
		  //  '$route': function(newUrl,oldUrl){
				// if(oldUrl.name=='lietouList'){ //详情页面返回的
				// 	if(oldUrl.params.refresh){
				// 	  this.loadData();
				// 	}
				// }
		  //  }
		},
		async created() {
		   this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
			  this.pageNo = val;
			  this.loadData()
			},
			async loadData() {
			  const loading = this.$loading({
			    lock: true,
			    text: 'Loading',
			    spinner: 'el-icon-loading',
			    background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
					let data = {
						"token": this.token,
						"is_handled": this.second, //	是否处理 1 未处理 2 已处理 0 所有	1
						"usertype": this.first, //	string	否	用户类型 1 猎头 2 用工公司 0 所有
						"p": this.pageNo,//分页页码
						"size": this.pageSize,//分页每页数量
					}
					let res = await this.$http({
						url: '/man/Opinion/getList',
						method: 'post',
						params: data
					});
					res.data.forEach(item => {
						item.repicList = item.pics.split();
					})
					this.tableData = res.data;
					this.pageCount = res.max_page; //总页数
					this.pageNo = Number(res.p); //当前页 size当前页
					loading.close();
				} catch (e) {
					console.log(e)
					loading.close();
				}
			},
			// 确认处理i
			handleClose(id){
				this.$confirm('是否确认处理？', '操作确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					closeOnClickModal: false
				}).then(async value => {
					try {
						let res = await this.$http({
							url: '/man/Opinion/setInfo',
							method: 'post',
							params: {
								"token": this.token,
								"id": id
							}
						});
						this.$message({
							type: 'success',
							message: '处理成功！'
						});
						this.loadData();
					} catch (e) {
						console.log(e)
					}
				}).catch(() => {
					
				});
			},

		}
	}
</script>

<style lang="scss" scoped="scoped">
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.answerTable{
		margin-top:15px;
	}
	.lietou-right{
		margin-top:30px;
	}
  .el-button.buttonStyle2{
    font-size: 14px;
    border-radius: 5px;
    margin-left:15px;
  }
</style>
<style>
	.el-message{
		top:120px !important;
	}
	.el-icon-circle-close{
		color:#ccc !important;
	}
</style>
